<template>
  <div class="sjdy">
    <div class="sjdy_tree">
      <div class="sjdy_tree_title">
        <span>数据定义</span>
        <el-button  type="text"  size="mini"  @click="() => append(data, 0)">
          新增根节点
        </el-button>
      </div>
      <el-tree
        :data="data"
        :props="defaultProps"
        @node-click="handleNodeClick"
        node-key="id"
        :expand-on-click-node="false"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }" @mouseenter="mouseEnter(node)" @mouseleave="mouseLeave(node)">
          <el-input v-model="node.data.standardNam" placeholder="新增节点" v-if="node.data.isNew === true && node.level === 1" @blur="inputBlur(node, data)" @keyup.enter.native="inputBlur(node, data)"></el-input>
          <el-input v-model="node.data.recDesc" placeholder="新增节点" v-else-if="node.data.isNew === true && node.level === 2" @blur="inputBlur(node, data)" @keyup.enter.native="inputBlur(node, data)"></el-input>
          <el-input v-model="node.data.fldChiNam" placeholder="新增节点" v-else-if="node.data.isNew === true && node.level === 3" @blur="inputBlur(node, data)" @keyup.enter.native="inputBlur(node, data)"></el-input>
          <span v-else-if="node.data.isNew === false && node.level === 1" >{{ node.data.standardNam }}</span>
          <span v-else-if="node.data.isNew === false && node.level === 2" >{{ node.data.recDesc }}</span>
          <span v-else-if="node.data.isNew === false && node.level === 3" >{{ node.data.fldChiNam }}</span>
          <span v-show="node.data.isIn === true">
            <el-button type="text" size="mini" @click="() => append(data)">
              添加
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="() => edit(node, data)"
            >
              编辑
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="() => remove(node, data)"
            >
              删除
            </el-button>
          </span>
        </span>
      </el-tree>
    </div>
    <div class="sjdy_table">
      <div class="sjxxwh">
        <div class="sjxxwh_title">
          <span>数据信息维护</span>
          <el-button type="primary" @click="saveForm">保存</el-button>
        </div>
        <el-form ref="form" :model="form" label-width="110px" label-position="left" :rules="rules">
          <el-row v-for="item in sjxx" :key="item.id">
            <el-col v-for="i in item.col" :key="i.label" :span="i.span" :style="item.hasLine ? {borderBottom:'1px dashed #dcdfe6'} : ''">
              <el-form-item :prop="i.prop">
                <span slot="label" :style="{color:i.color}">{{i.label}}</span>
                <el-date-picker
                  v-model="form[i.prop]"
                  type="datetime"
                  :placeholder="i.placeholder"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  v-if="i.isTime"
                  :disabled="i.disabled">
                </el-date-picker>
                <el-checkbox v-model="form[i.prop]" :true-label="'1'" :false-label="'0'" v-else-if="i.isChecked"></el-checkbox>
                <el-input v-model.number="form[i.prop]" style="width:100%" :disabled="i.disabled" v-else-if="i.isNumber"></el-input>
                <el-input v-model="form[i.prop]" style="width:100%" :disabled="i.disabled" v-else></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/api/modules/EDI/index.js'
import { parseTime } from '@/utils/index.js'
export default {
  name: 'defineEDI',
  data() {
    var checkNum2 = (rule, value, callback) => {
      const numReg = /^[0-9]*$/
      const numRe = new RegExp(numReg)
      if (!numRe.test(value) && value !== '' && value !== null) {
        callback(new Error(`请输入数字`));
        return false
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'));
        } else {
          if (value > 99) {
            callback(new Error(`最大值为99`));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    var checkNum = (rule, value, callback) => {
      const numReg = /^[0-9]*$/
      const numRe = new RegExp(numReg)
      const maxNumber = Math.pow(10, rule.number) - 1
      if (!numRe.test(value) && value !== '' && value !== null) {
        console.log(value, 'value');

        callback(new Error(`请输入数字`));
        return false
      }
      setTimeout(() => {
        if (value > maxNumber) {
          callback(new Error(`最大值为${maxNumber}`));
        } else {
          callback();
        }
      }, 1000);
    };
    return {
      data: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      form: {
        recNam: JSON.parse(sessionStorage.getItem('userInfo')).userName,
        updNam: JSON.parse(sessionStorage.getItem('userInfo')).userName
      }, // 数据信息维护表单数据
      rules: { // 数据信息维护表单校验规则
        standardCod: [
          { required: true, message: '请输入数据标准码', trigger: 'blur' },
          { min: 0, max: 10, message: '长度小于 10 个字符', trigger: 'blur' }
        ],
        recTyp: [
          { min: 0, max: 1, message: '长度小于 1 个字符', trigger: 'blur' }
        ],
        standardNam: [
          { required: true, message: '请输入数据标准名称', trigger: 'blur' },
          { min: 0, max: 35, message: '长度小于 35 个字符', trigger: 'blur' }
        ],
        dataTyp: [
          { required: true, message: '请输入数据类型', trigger: 'blur' },
          { min: 0, max: 10, message: '长度小于 10 个字符', trigger: 'blur' }
        ],
        fldTyp: [
          { min: 0, max: 1, message: '长度小于 1 个字符', trigger: 'blur' }
        ],
        msgCod: [
          { required: true, message: '请输入报文代码', trigger: 'blur' },
          { min: 0, max: 6, message: '长度小于 6 个字符', trigger: 'blur' }
        ],
        msgH: [
          { min: 0, max: 10, message: '长度小于 10 个字符', trigger: 'blur' }
        ],
        splitTyp: [
          { min: 0, max: 10, message: '长度小于 10 个字符', trigger: 'blur' }
        ],
        lineEnd: [
          { min: 0, max: 10, message: '长度小于 10 个字符', trigger: 'blur' }
        ],
        prefix: [
          { min: 0, max: 10, message: '长度小于 10 个字符', trigger: 'blur' }
        ],
        postfix: [
          { min: 0, max: 10, message: '长度小于 10 个字符', trigger: 'blur' }
        ],
        subfix: [
          { min: 0, max: 10, message: '长度小于 10 个字符', trigger: 'blur' }
        ],
        release: [
          { min: 0, max: 10, message: '长度小于 10 个字符', trigger: 'blur' }
        ],
        checkLenId: [
          { min: 0, max: 1, message: '长度小于 1 个字符', trigger: 'blur' }
        ],
        senderCod: [
          { min: 0, max: 35, message: '长度小于 35 个字符', trigger: 'blur' }
        ],
        receiverCod: [
          { min: 0, max: 35, message: '长度小于 35 个字符', trigger: 'blur' }
        ],
        recNam: [
          { required: true, message: '请输入录入员', trigger: 'blur' },
          { min: 0, max: 10, message: '长度小于 10 个字符', trigger: 'blur' }
        ],
        remarkTxt: [
          { min: 0, max: 255, message: '长度小于 255 个字符', trigger: 'blur' }
        ],
        updNam: [
          { min: 0, max: 10, message: '长度小于 10 个字符', trigger: 'blur' }
        ],
        recId: [
          { required: true, message: '请输入数据标准码', trigger: 'blur' },
          { min: 0, max: 6, message: '长度小于 6 个字符', trigger: 'blur' }
        ],
        seqNo: [
          { validator: checkNum, number: 10, trigger: 'blur' }
        ],
        nestNum: [
          { validator: checkNum, number: 4, trigger: 'blur' }
        ],
        cost: [
          { validator: checkNum, number: 4, trigger: 'blur' }
        ],
        minLoop: [
          { validator: checkNum, number: 4, trigger: 'blur' }
        ],
        maxLoop: [
          { validator: checkNum, number: 4, trigger: 'blur' }
        ],
        recLen: [
          { validator: checkNum, number: 4, trigger: 'blur' }
        ],
        grpStart: [
          { validator: checkNum, number: 4, trigger: 'blur' }
        ],
        grpEnd: [
          { validator: checkNum, number: 4, trigger: 'blur' }
        ],
        recDesc: [
          { min: 0, max: 30, message: '长度小于 30 个字符', trigger: 'blur' }
        ],
        grpId: [
          { min: 0, max: 1, message: '长度小于 1 个字符', trigger: 'blur' }
        ],
        grpNo: [
          { min: 0, max: 4, message: '长度小于 4 个字符', trigger: 'blur' }
        ],
        hostGrpNo: [
          { min: 0, max: 4, message: '长度小于 4 个字符', trigger: 'blur' }
        ],
        recStat: [
          { min: 0, max: 3, message: '长度小于 3 个字符', trigger: 'blur' }
        ],
        blkLoopId: [
          { min: 0, max: 1, message: '长度小于 1 个字符', trigger: 'blur' }
        ],
        recLoopId: [
          { min: 0, max: 1, message: '长度小于 1 个字符', trigger: 'blur' }
        ],
        recMod: [
          { min: 0, max: 255, message: '长度小于 255 个字符', trigger: 'blur' }
        ],
        affectTab: [
          { min: 0, max: 200, message: '长度小于 200 个字符', trigger: 'blur' }
        ],
        recognizeFun: [
          { required: true, message: '请输入识别式', trigger: 'blur' },
          { min: 0, max: 200, message: '长度小于 200 个字符', trigger: 'blur' }
        ],
        recRecognize: [
          { min: 0, max: 1, message: '长度小于 1 个字符', trigger: 'blur' }
        ],
        grpEndid: [
          { min: 0, max: 1, message: '长度小于 1 个字符', trigger: 'blur' }
        ],
        fldNo: [
          { required: true, message: '请输入字段主键', trigger: 'blur' },
          { validator: checkNum2, trigger: 'blur' }
        ],
        fldLength: [
          { validator: checkNum, number: 3, trigger: 'blur' }
        ],
        fldInt: [
          { validator: checkNum, number: 1, trigger: 'blur' }
        ],
        fldDec: [
          { validator: checkNum, number: 1, trigger: 'blur' }
        ],
        tabFldNo: [
          { validator: checkNum, number: 8, trigger: 'blur' }
        ],
        minNum: [
          { validator: checkNum, number: 11, trigger: 'blur' }
        ],
        maxNum: [
          { validator: checkNum, number: 11, trigger: 'blur' }
        ],
        dataEleTyp: [
          { min: 0, max: 1, message: '长度小于 1 个字符', trigger: 'blur' }
        ],
        fldEngNam: [
          { min: 0, max: 40, message: '长度小于 40 个字符', trigger: 'blur' }
        ],
        fldChiNam: [
          { min: 0, max: 40, message: '长度小于 40 个字符', trigger: 'blur' }
        ],
        fldStat: [
          { min: 0, max: 3, message: '长度小于 3 个字符', trigger: 'blur' }
        ],
        codClass: [
          { min: 0, max: 30, message: '长度小于 30 个字符', trigger: 'blur' }
        ],
        dataFmt: [
          { min: 0, max: 20, message: '长度小于 20 个字符', trigger: 'blur' }
        ],
        defaultVal: [
          { min: 0, max: 20, message: '长度小于 20 个字符', trigger: 'blur' }
        ],
        fldMod: [
          { min: 0, max: 35, message: '长度小于 35 个字符', trigger: 'blur' }
        ],
        funcTyp: [
          { min: 0, max: 35, message: '长度小于 35 个字符', trigger: 'blur' }
        ],
        addUp: [
          { min: 0, max: 1, message: '长度小于 1 个字符', trigger: 'blur' }
        ],
        fieldTyp: [
          { min: 0, max: 1, message: '长度小于 1 个字符', trigger: 'blur' }
        ],
        groupNo: [
          { validator: checkNum, number: 2, trigger: 'blur' }
        ],
        parentFldno: [
          { validator: checkNum, number: 4, trigger: 'blur' }
        ],
        groupLoop: [
          { min: 0, max: 1, message: '长度小于 1 个字符', trigger: 'blur' }
        ],
        decodeFldCol: [
          { min: 0, max: 600, message: '长度小于 600 个字符', trigger: 'blur' }
        ],
        codFld: [
          { min: 0, max: 300, message: '长度小于 300 个字符', trigger: 'blur' }
        ]
      },
      sjxx: [],
      // 三级form表单
      sjxxMap: [
        [
          { col: [
            { label: '数据标准码', span: 12, color: 'red', prop: 'standardCod' },
            { label: '数据标准名称', span: 12, color: 'red', prop: 'standardNam' }
          ], id: '1', hasLine: false },
          { col: [
            { label: '数据类型', span: 12, color: 'red', prop: 'dataTyp' },
            { label: '报文代码', span: 12, color: 'red', prop: 'msgCod', disabled: true }
          ], id: '2', hasLine: false },
          { col: [
            { label: '缺省前缀符', span: 12, color: 'black', prop: 'prefix' },
            { label: '缺省后缀符', span: 12, color: 'black', prop: 'postfix' }
          ], id: '3', hasLine: false },
          { col: [
            { label: '缺省子后缀符', span: 12, color: 'black', prop: 'subfix' },
            { label: '释义符', span: 12, color: 'red', prop: 'release' }
          ], id: '4', hasLine: false },
          { col: [
            { label: '记录分隔类型', span: 12, color: 'red', prop: 'splitTyp' },
            { label: '记录后插入换行', span: 12, color: 'black', prop: 'appendCodId', isChecked: true }
          ], id: '5', hasLine: false },
          { col: [
            { label: '记录分隔符', span: 12, color: 'red', prop: 'lineEnd' },
            { label: '检查数据长度', span: 12, color: 'black', prop: 'checkLenId' }
          ], id: '6', hasLine: true },
          { col: [
            { label: '报文头标志', span: 12, color: 'black', prop: 'msgH' },
            { label: '接受方代码', span: 12, color: 'black', prop: 'receiverCod' }
          ], id: '7', hasLine: false },
          { col: [
            { label: '发送方代码', span: 12, color: 'black', prop: 'senderCod' }
          ], id: '8', hasLine: false },
          { col: [
            { label: '备注', span: 24, color: 'black', prop: 'remarkTxt' }
          ], id: '9', hasLine: false },
          { col: [
            { label: '录入员', span: 4, color: 'black', prop: 'recNam', disabled: true },
            { label: '录入时间', span: 8, color: 'black', prop: 'recTim', isTime: true, disabled: true, placeholder: '录入时间无需输入' },
            { label: '修改员', span: 4, color: 'black', prop: 'updNam', disabled: true },
            { label: '修改时间', span: 8, color: 'black', prop: 'updTim', isTime: true, disabled: true, placeholder: '修改时间无需输入' }
          ], id: '10', hasLine: false }
        ],
        [
          { col: [
            { label: '数据标准码', span: 8, color: 'red', prop: 'standardCod', disabled: true },
            { label: '记录描述', span: 8, color: 'black', prop: 'recDesc' },
            { label: '记录位置号', span: 8, color: 'red', prop: 'seqNo', isNumber: true }
          ], id: '1', hasLine: false },
          { col: [
            { label: '记录标标志', span: 8, color: 'red', prop: 'recId' },
            { label: '识别方式', span: 8, color: 'red', prop: 'recRecognize' },
            { label: '识别式', span: 8, color: 'red', prop: 'recognizeFun' }
          ], id: '2', hasLine: false },
          { col: [
            { label: '开始块循环', span: 4, color: 'red', prop: 'blkLoopId', isChecked: true },
            { label: '记录循环', span: 4, color: 'red', prop: 'recLoopId', isChecked: true },
            { label: '段组开始位置号', span: 8, color: 'red', prop: 'grpStart', isNumber: true },
            { label: '段组结束位置号', span: 8, color: 'red', prop: 'grpEnd', isNumber: true }
          ], id: '3', hasLine: false },
          { col: [
            { label: '是否段组', span: 8, color: 'black', prop: 'grpId', isChecked: true },
            { label: '段组号', span: 8, color: 'black', prop: 'grpNo' },
            { label: '宿主段组号', span: 8, color: 'black', prop: 'hostGrpNo' }
          ], id: '4', hasLine: false },
          { col: [
            { label: '记录状态标记', span: 8, color: 'black', prop: 'recStat' },
            { label: '记录总长', span: 8, color: 'black', prop: 'recLen', isNumber: true },
            { label: '循环号', span: 8, color: 'black', prop: 'nestNum', isNumber: true }
          ], id: '5', hasLine: true },
          { col: [
            { label: '前缀符', span: 6, color: 'black', prop: 'prefix' },
            { label: '后缀符', span: 6, color: 'black', prop: 'postfix' }
          ], id: '6', hasLine: false },
          { col: [
            { label: '样本数据', span: 24, color: 'black', prop: 'recMod' }
          ], id: '7', hasLine: false },
          { col: [
            { label: '最大出现次数', span: 6, color: 'black', prop: 'maxLoop', isNumber: true },
            { label: '最少出现次数', span: 6, color: 'black', prop: 'minLoop', isNumber: true },
            { label: '所占长度', span: 6, color: 'black', prop: 'cost', isNumber: true },
            { label: '记录类型', span: 6, color: 'red', prop: 'recTyp' }
          ], id: '8', hasLine: false },
          { col: [
            { label: '录入员', span: 4, color: 'black', prop: 'recNam', disabled: true },
            { label: '录入时间', span: 8, color: 'black', prop: 'recTim', isTime: true, disabled: true, placeholder: '录入时间无需输入' },
            { label: '修改员', span: 4, color: 'black', prop: 'updNam', disabled: true },
            { label: '修改时间', span: 8, color: 'black', prop: 'updTim', isTime: true, placeholder: '修改时间无需输入' }
          ], id: '10', hasLine: false }
        ],
        [
          { col: [
            { label: '数据标准码', span: 6, color: 'black', prop: 'standardCod', disabled: true },
            { label: '记录标标志', span: 6, color: 'black', prop: 'recId', disabled: true },
            { label: '字段主键', span: 6, color: 'red', prop: 'fldNo', isNumber: true },
            { label: '字段次序标识', span: 6, color: 'red', prop: 'seqNo', isNumber: true }
          ], id: '1', hasLine: false },
          { col: [
            { label: '中文名', span: 6, color: 'red', prop: 'fldChiNam' },
            { label: '英文名', span: 12, color: 'red', prop: 'fldEngNam' },
            { label: '字段长度', span: 6, color: 'red', prop: 'fldLength', isNumber: true }
          ], id: '2', hasLine: false },
          { col: [
            { label: '父组标识', span: 6, color: 'red', prop: 'parentFldno', isNumber: true },
            { label: '组内编号', span: 6, color: 'red', prop: 'groupNo', isNumber: true },
            { label: '对应表类型', span: 6, color: 'red', prop: 'tabFldNo', isNumber: true },
            { label: '对应表列号', span: 6, color: 'red', prop: 'decodeFldCol' }
          ], id: '3', hasLine: false },
          { col: [
            { label: '字段类型', span: 6, color: 'black', prop: 'fieldTyp' },
            { label: '功能函数', span: 12, color: 'black', prop: 'funcTyp' },
            { label: '向上累加', span: 6, color: 'black', prop: 'addUp', isChecked: true }
          ], id: '4', hasLine: false },
          { col: [
            { label: '数据元类型', span: 6, color: 'black', prop: 'dataEleTyp' },
            { label: '数据格式', span: 12, color: 'black', prop: 'dataFmt' },
            { label: '描述类型', span: 6, color: 'black', prop: 'fldDec', isNumber: true }
          ], id: '5', hasLine: false },
          { col: [
            { label: '整形长度', span: 6, color: 'black', prop: 'fldInt', isNumber: true },
            { label: '数据类型', span: 6, color: 'black', prop: 'fldTyp' },
            { label: '所属代码集', span: 6, color: 'black', prop: 'codClass' },
            { label: '缺省值', span: 6, color: 'black', prop: 'defaultVal' }
          ], id: '6', hasLine: true },
          { col: [
            { label: '前缀符', span: 6, color: 'black', prop: 'prefix' },
            { label: '后缀符', span: 6, color: 'red', prop: 'postfix' },
            { label: '状态标志', span: 6, color: 'black', prop: 'fldStat' }
          ], id: '7', hasLine: false },
          { col: [
            { label: '所占长度', span: 6, color: 'red', prop: 'cost', isNumber: true },
            { label: '样本数据', span: 18, color: 'black', prop: 'fldMod' }
          ], id: '8', hasLine: false },
          { col: [
            { label: '最大出现次数', span: 6, color: 'black', prop: 'maxLoop', isNumber: true },
            { label: '最少出现次数', span: 6, color: 'black', prop: 'minLoop', isNumber: true },
            { label: '最小值', span: 6, color: 'black', prop: 'minNum', isNumber: true },
            { label: '最大值', span: 6, color: 'black', prop: 'maxNum', isNumber: true }
          ], id: '9', hasLine: true },
          { col: [
            { label: '录入员', span: 4, color: 'black', prop: 'recNam', disabled: true },
            { label: '录入时间', span: 8, color: 'black', prop: 'recTim', isTime: true, disabled: true, placeholder: '录入时间无需输入' },
            { label: '修改员', span: 4, color: 'black', prop: 'updNam', disabled: true },
            { label: '修改时间', span: 8, color: 'black', prop: 'updTim', isTime: true, placeholder: '修改时间无需输入' }
          ], id: '10', hasLine: false }
        ]
      ]
    };
  },
  async created() {
    // this.getForm(1)
    // window.addEventListener('keydown', this.handleKeyDown, true); // 开启监听键盘按下事件
    this.getTreeList()
  },
  methods: {
    /**
     * 获取树形结构数据
     */
    async getTreeList(hasChanged = false) {
      this.sjxx = this.sjxxMap[0] // 初始默认表头
      const ediTree = JSON.parse(sessionStorage.getItem('EDI_TREE')) // 判断是否有缓存
      if (ediTree === null) {
        const res = await api.reqGetEdiTree()
        this.data = res.data
        sessionStorage.setItem('EDI_TREE', JSON.stringify(this.data))
        this.form = this.data[0]
      } else if (hasChanged) {
        const res = await api.reqGetEdiTree()
        this.data = res.data
        sessionStorage.setItem('EDI_TREE', JSON.stringify(this.data))
      } else {
        this.data = ediTree
        this.form = this.data[0]
      }
    },
    /**
     * 获取form表单初始数据
     */
    getForm(level, data) {
      this.form = {}
      this.sjxxMap[level].forEach(item => {
        item.col.forEach(i => {
          this.form[i.prop] = ''
        })
      })
      this.form.appendCodId = 0
      this.form.recNam = JSON.parse(sessionStorage.getItem('userInfo')).userName
      this.form.updNam = JSON.parse(sessionStorage.getItem('userInfo')).userName
      // this.form.recTim = new Date().getTime()
      if (level === 1) { // 如果新增为2级节点，则standardCod带过来并且不可修改
        this.form.standardCod = data.standardCod
      } else if (level === 2) { // 如果新增为3级节点，则standardCod，recId带过来并且不可修改
        this.form.standardCod = data.standardCod
        this.form.recId = data.recId
      } else if (level === 0) { // 如果新增为1级界节点，则msgCod带过来且不可修改
        this.form.msgCod = data[0].msgCod
      }
    },
    /**
     * 新增节点
     */
    append(data, js = '') {
      const level = js === '' ? Number(data.lable) : js // 如果根节点则会传入js，如果其他就取所点击的节点
      this.getForm(level, data)
      const newChild = JSON.parse(JSON.stringify(this.form)) // 深拷贝一份form
      newChild.standardNam = '新增节点'
      newChild.children = []
      newChild.isIn = false // 新增节点isIn为默认false
      newChild.isNew = true // 新增节点isNew为true
      newChild.lable = level + 1 // 新增节点级别标识为父级级别 + 1
      if (level === 1) { // 如果新增为2级节点，则standardCod带过来并且不可修改
        newChild.standardCod = data.standardCod
        newChild.recDesc = '新增节点'
      } else if (level === 2) { // 如果新增为3级节点，则standardCod，recId带过来并且不可修改
        newChild.standardCod = data.standardCod
        newChild.recId = data.recId
        newChild.fldChiNam = '新增节点'
      } else if (level === 0) { // 如果新增为1级界节点，则msgCod带过来且不可修改
        newChild.msgCod = data[0].msgCod
        newChild.standardNam = '新增节点'
      }
      console.log(newChild, 'newChild');
      if (!data.children) { // 如果data中没有children加上
        this.$set(data, 'children', []);
      }
      if (level === 0) {
        data.push(newChild)
      } else {
        data.children.push(newChild);
      }
    },
    /**
     * 删除节点
     */
    remove(node, data) {
      if (!data.id) {
        const parent = node.parent;
        console.log('123', parent.data);
        const children = parent.data.children.length === 0 ? parent.data : parent.data.children;
        const index = data.id ? children.findIndex(d => d.id === data.id) : children.findIndex(d => d.$treeNodeId === data.$treeNodeId);
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          children.splice(index, 1);
          this.$message({
            message: '删除成功',
            type: 'success'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      } else {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          api.reqDeleteNode({ id: data.id }).then(res => {
            if (res.code === '00000000') {
              this.$message({
                message: '删除成功',
                type: 'success'
              });
              this.getTreeList(true)
            } else {
              this.$message({
                message: '删除失败',
                type: 'error'
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    },
    edit(node, data) {
      node.data.isNew = true;
      console.log(node, data, 'node');
    },
    /**
     * 保存form数据（新增节点）
     */
    async saveForm() {
      if (this.form.recTim === '') {
        this.form.recTim = parseTime(new Date().getTime())
      } else {
        this.form.updTim = parseTime(new Date().getTime())
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.lable === 2) { // 保存2级节点
            api.reqAddSecond(this.form).then(res => {
              if (res.code === '00000000') {
                this.$message({
                  message: '保存成功',
                  type: 'success'
                });
                this.getTreeList(true)
              } else {
                this.$message({
                  message: '保存失败',
                  type: 'error'
                });
              }
            })
          } else if (this.form.lable === 3) { // 保存3级节点
            api.reqAddThird(this.form).then(res => {
              if (res.code === '00000000') {
                this.$message({
                  message: '保存成功',
                  type: 'success'
                });
                this.getTreeList(true)
              } else {
                this.$message({
                  message: '保存失败',
                  type: 'error'
                });
              }
            })
          } else if (this.form.lable === 1) { // 保存1级节点
            api.reqAddFirst(this.form).then(res => {
              if (res.code === '00000000') {
                this.$message({
                  message: '保存成功',
                  type: 'success'
                });
                this.getTreeList(true)
              } else {
                this.$message({
                  message: '保存失败',
                  type: 'error'
                });
              }
            })
          }
        } else {
          this.$message({
            message: '表单验证未通过',
            type: 'warning'
          });
          return false;
        }
      });
    },
    // 鼠标移入移出，展示/隐藏 添加编辑删除按钮
    mouseEnter(node) {
      node.data.isIn = true
    },
    mouseLeave(node) {
      node.data.isIn = false
    },
    handleNodeClick(data, node) {
      this.sjxx = this.sjxxMap[node.level - 1]
      this.form = data
    },
    inputBlur(node, data) {
      node.data.isNew = false
    }
  }
};
</script>

<style lang="less" scoped>
.sjdy {
  padding: 10px 20px;
  height: calc(100vh - 94px);
  display: flex;
  .sjdy_tree {
    width: 20%;
    height: 100%;
    border-right: 1px solid #dcdfe6;
    overflow: auto;
    .sjdy_tree_title {
      display: flex;
      justify-content: space-between;
      line-height: 25px;
      font-size: 16px;
      font-weight: 600;
      padding: 0 20px 0 5px;
    }
  }
  .sjdy_table {
    width: 78%;
    height: 100%;
    margin-left: 15px;
    .sjxxwh {
      width: 100%;
      height: 100%;
      padding: 0 20px;
      .sjxxwh_title {
        display: flex;
        justify-content: space-between;
        margin-left: -15px;
        line-height: 25px;
        font-size: 16px;
        font-weight: 600;
        .el-button {
          margin-right: 20px;
        }
      }
      .sjxxwh_button {
        float: right;
        margin-top: 10px;
      }
    }
  }
}
/deep/ .custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
/deep/ .el-tree-node__content {
  height: 30px;
}
/deep/ .el-form-item--mini.el-form-item {
    margin: 15px;
}
</style>
